<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Streamedian RTSP player example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://releases.flowplayer.org/6.0.5/skin/functional.css">
    <script src="https://releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
    <script src="streamedian.flowplayer.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
    <label>URL</label>
    <input  id="stream_url" value="rtsp://<your camera ip or URL>/path">
    <button id="set_new_url">Set</button>
</div>
<div class="duration_container">
    <label>Buffer</label>
    <input type="range" min="10" max="200" id="buffer_duration">
    <label id="buffer_value">120sec.</label>
</div>

<div id="test_video" class="is-closeable"></div>

<p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: streamedian.player@gmail.com</p>
<p>View HTML5 RTSP video player log</p>
<div id="pllogs" class="logs"></div>
<button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
<button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
<button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
<button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
</br></br>

<script>
    var scrollStatPl = true;
    var scrollStatWs = true;
    var pllogs = document.getElementById("pllogs");
    var wslogs = document.getElementById("wslogs");

    // define a new console
    var console=(function(oldConsole){
        return {
            log: function(){
                oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
            },
            info: function () {
                oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
            },
            warn: function () {
                oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
            },
            error: function () {
                oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
            }
        };
    }(window.console));

    function newConsole(args, textColor, backColor){
        let text = '';
        let node = document.createElement("div");
        for (let arg in args){
            text +=' ' + args[arg];
        }
        node.appendChild(document.createTextNode(text));
        node.style.color = textColor;
        node.style.backgroundColor = backColor;
        pllogs.appendChild(node);
        autoscroll(pllogs);
        return text;
    }

    //Then redefine the old console
    window.console = console;

    function cleanLog(element){
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    }

    function autoscroll(element){
        if(scrollStatus(element)){
            element.scrollTop = element.scrollHeight;
        }
        if(element.childElementCount > 1000){
            element.removeChild(element.firstChild);
        }
    }

    function scrollset(element, state){
        if(state){
            element.scrollTop = 0;
            scrollChange(element, false);
        } else {
            element.scrollTop = element.scrollHeight;
            scrollChange(element, true);
        }
    }

    function scrollswitch(element){
        if(scrollStatus(element)){
            scrollChange(element, false);
        } else {
            scrollChange(element, true);
        }
    }

    function scrollChange(element, status){
        if(scrollStatus(element)){
            scrollStatPl = false;
            document.getElementById("scrollSetPl").innerText = "Scroll on";
        } else {
            scrollStatPl = true;
            document.getElementById("scrollSetPl").innerText = "Scroll off";
        }
    }

    function scrollStatus(element){
        if(element.id === "pllogs"){
            return scrollStatPl;
        } else {
            return scrollStatWs;
        }
    }


</script>

<script>
    var flowPlayer = flowplayer("#test_video", {
        autoplay : false,
        splash: true,
        ratio: 9 / 16,
        streamedian_player_config:{
            socket:"ws://127.0.0.1:8080/ws/",
            // socket: "wss://streamedian.com/ws/",
            bufferDuration: 120
        },
        clip: {
            title: "...",
            /*sources: [
                {
                    type: "application/x-rtsp",
                }
             ]*/
    },
        embed: false

    }).on("ready", function (e, api, video) {
        document.querySelector("#fp-test_video .fp-title").innerHTML =
            api.engine.engineName + " engine playing " + video.type;
    });

    var html5Player  = document.getElementById("test_video");
    var urlButton    = document.getElementById("set_new_url");
    var urlEdit      = document.getElementById("stream_url");
    var bufferRange  = document.getElementById("buffer_duration");
    var bufferValue  = document.getElementById("buffer_value");

    bufferRange.addEventListener('input', function(){
        var player = window.StreamedianPlayer;
        if(player){
            var iValue = parseInt(this.value, 10);
            player.bufferDuration = iValue;
            flowPlayer.conf.streamedian_player_config.bufferDuration = iValue;
            bufferValue.innerHTML = this.value + "sec.";
        }
    });

    urlButton.onclick = ()=>{
        flowPlayer.unload();

        var newSource   = urlEdit.value;
        var sources = [{
            src  : newSource,
            type : "application/x-rtsp"
        }];

        flowPlayer.load(sources);
        flowPlayer.play();
    };


</script>
</body>
</html>